# 1 gui库使用

gui是基于opengl写的一款鸭子gui,简单易用。

# 1.1 导入库文件

(import  (scheme)
     (gui duck)
     (gui window)
     (gui widget)
     (gui layout)
     )

一切基于widget,大多数方法都是widget操作,widget-set-attrs设置属性。 常见的基本组件有dialog button image text scroll edit video tab tree view pop progress,基本上是3个参数,宽度、高度、内容。

# 1.2 组件

# 1.2.1 按钮

定义一个按钮组件

(button 120.0 30.0 "主要")

定义一个checkbox

(define (checkbox w h t)
    (let ((box (text w h t))
        (icon-check (load-texture "check.png"))
        (icon-checked (load-texture "checked.png"))
        )
        (widget-set-events box 'click (lambda (w p type data)
                (if (eq? #t (widget-get-attrs w 'checked))
                    (widget-set-attrs w 'checked #f)
                    (widget-set-attrs w 'checked #t)
                )))
        (widget-add-draw
            box
            (lambda (w p)
            (let ((x (widget-get-attr w %gx))
                    (y (widget-get-attr w %gy))
                    (checked (widget-get-attrs w 'checked))
                    )
                    (if (eq? #t checked)
                        (draw-image (+ 6.0 x) (+ y 6.0) 20.0 20.0 icon-checked)
                        (draw-image (+ 6.0 x) (+ y 6.0) 20.0 20.0 icon-check)
                        ))))
     box
    )
)
(checkbox 120.0 30.0 "我是checkbox")

# 1.2.2 图片

定义一个图片组件

(image 180.0 180.0 "duck.png")

自定义网络下载图片组件

(define (image-net w h src)
  (let ((img (image w h src))
	(file-name (format  "~a.jpg" (string-hash src))))
    (widget-set-attrs img 'mode 'center-crop)
    (if (file-exists? file-name)
	(begin
	  (widget-set-attrs img 'src file-name)
	  (widget-set-attrs img 'load #f))
	(fork-thread
	 (lambda ()
	   (let ((file (url->file file-name src) ))
	     (if (file-exists? file)
		 (begin 
		   (widget-set-attrs img 'src file-name)
		   (widget-set-attrs img 'load #f)
		   (window-post-empty-event)
		   ))
	     )
	   ))
     )
    img
    ))
;;使用图片下载
(image-net 180.0 180.0 "http://www.cosplayjia.com/up/spw/img/171220/1712200840035a39b16346c5a/5a39b1646c7ff.jpg")

# 1.2.3 文本

(text 120.0 30.0 "我是文本文本,只读")

# 1.2.3 对话框

(dialog 430.0 10.0 230.0 600.0 "视频demo")

# 1.2.4 树

(tree 200.0 2500.0 "根节点")

自定义带图标的树

(define (icon-tree w h text)
        (let ((it (tree w h text))
            (file-icon (load-texture "file-text.png"))
            (dir-icon (load-texture "folder.png"))
            )
            (widget-add-draw
            it
            (lambda (w p)
            (let ((x (vector-ref w %gx))
                (y (vector-ref w %gy)))
                (if (or (null? (widget-get-attrs w 'dir)) (<= (length (widget-get-child w) ) 0))
                    (draw-image (+  -20.0 x) (+ y 4.0) 15.0 15.0 dir-icon)
                    (draw-image (+ -20.0 x) (+ y 4.0) 15.0 15.0 dir-icon))
                )
            ))
            (widget-set-padding it 15.0 20.0 20.0 20.0)
            it
            ))

(icon-tree  200.0 200.0  (format "节点~a\n" i))

# 1.2.5 文本编辑

(edit 260.0 120.0 "scheme-lib QQ群:Lisp兴趣小组239401374 啊哈哈")

设置编辑属性

;;显示行号
(widget-set-attrs editor 'show-no 1)
;;设置行号颜色
(widget-set-attrs editor 'lineno-color #xff6272a4)
;;设置选择背景色
(widget-set-attrs editor 'select-color #xff44475a)
;;设置光标颜色
(widget-set-attrs editor 'cursor-color #xfff8f8f0)
;;设置字体大小
(widget-set-attrs editor 'font-size 20.0)
(widget-set-attrs editor 'font-line-height 1.2)

# 1.2.6 视频

(video (/ 640.0 3.0) (/ 360.0 3) "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4")

# 1.2.7 标签

(tab 450.0 300.0 (list "标签1" "标签2" "标签3" ))

# 1.2.8 容器

(view 260.0 120.0)

# 1.2.9 弹出

(pop 100.0 40.0 "根节点")

# 1.2.10 进度条

(progress 200.0 10.0 20.0)

# 1.3 简单例子

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;Copyright 2016-2080 evilbinary.
;作者:evilbinary on 11/11/18.
;邮箱:rootdebug@163.com
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(import  (scheme)
     (glfw glfw)
     (gui duck)
     (gui window)
     (gui widget)
     (gui layout)
     )

(define window '() )
(define width 800)
(define height 700)

(define (duck-app)
  (set! window (window-create width height "hello鸭子"))
   (widget-add (edit 200.0 100.0 "最简单的编辑器 鸭编"))
 
 ;;run
  (window-loop window)
  (window-destroy window)
  )

(duck-app)

第一步,倒入鸭库使用关键字import,这个库都是gui相关的。

(import  (scheme)
     (glfw glfw)
     (gui duck)
     (gui window)
     (gui widget)
     (gui layout)
     )

第二步,创建一个窗体window-create 三个参数宽度、高度、标题名字,返回一个windows。

(window-create width height "hello鸭子")

第三步,创建编辑控件,也是3个参数,宽度、高度、内容,返回一个widget。

(edit 200.0 100.0 "最简单的编辑器 鸭编")

第四步,把编辑器添加到窗体上。

(widget-add (edit 200.0 100.0 "最简单的编辑器 鸭编"))

第五步,启动窗体循环事件,完毕。

(window-loop window)
Last Updated: 12/11/2020, 1:11:36 PM